{% extends '_base_create_update.html' %}

{% block top_css %}
    {{ super() }}

    <!--xterm-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/xterm/xterm.css') }}">
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">

    <style>

        .screen {
            height: 546px;
            background-color: #000;
            padding: 8px;
            overflow: auto;
        }

    </style>


{% endblock %}


<!-- Content head -->
{% block head_title %}
    作业中心
{% endblock %}

{% block head_nav %}
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i></a></li>
        <li><a href="#">实时任务</a></li>
        <li class="active">角色执行</li>
    </ol>
{% endblock %}

<!-- Content body -->
{% block body_title %}
    <div style="text-align: left">角色执行</div>
{% endblock %}

{% block body_form %}
    <div class="row" style="padding-left: 20px; padding-right: 20px;">
        <div class="col-lg-5">
            <form name="roleForm">
                <div class="row">
                    <fieldset class="pad-top">
                        <label class="col-lg-12 control-label">角色</label>
                        <div class="col-lg-12">
                            <select name="roles" class="form-control select2">
                            </select>
                            <span class="fa fa-info-circle mar-top-7"> 角色根据选择的顺序从左到右依次执行</span>
                        </div>
                    </fieldset>
                </div>
                <div class="row">
                    <fieldset class="pad-top">
                        <label class="col-lg-12 control-label">主机</label>
                        <div class="col-lg-12">
                            <select name="hosts" class="form-control select2">
                            </select>
                        </div>
                    </fieldset>
                </div>
                <div class="row">
                    <fieldset class="pad-top">
                        <label class="col-lg-12 control-label">动态组</label>
                        <div class="col-lg-12">
                            <select name="groups" class="form-control select2">
                            </select>
                        </div>
                    </fieldset>
                </div>
                <div class="row" style="visibility: hidden">
                    <fieldset class="pad-top">
                        <label class="col-lg-12 control-label">参数</label>
                        <div class="col-lg-12">
                             <textarea class="form-control" style="height: 280px" name="args" disabled>{{ args }}</textarea>
                        </div>
                    </fieldset>
                </div>
                <div class="row mar-top">
                    <div class="col-sm-12">
                        <div>
                            <button id="exec" class="btn btn-purple pull-right  mar-rgt" type="button">执行</button>
                            <button id="cancel" class="btn btn-default pull-right mar-rgt" type="button">取消</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-lg-7">
            <div class="row">
                <fieldset class="pad-top">
                    <label class="col-lg-12 control-label">执行结果</label>
                    <div class="col-lg-12">
                        <div class="panel pad-no">
                            <div class="screen">
                                <div id="term">
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
{% endblock %}



{% block buttom_js %}
    {{ super() }}
    <!--bees-->
    <script src="{{ url_for('static', filename='js/bees.js') }}"></script>
    <!--xterm-->
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/xterm/xterm.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='plugins/xterm/addons/fit/fit.js') }}"></script>

    <script type="text/javascript">
        $(function () {
            bees.initServerSideSelect2($('select[name="roles"]'), {
                 url: '{{ url_for("tasks.api-role-list") }}'
            }, { multiple:true, placeholder: "请选择执行的角色" });

            bees.initServerSideSelect2($('select[name="hosts"]'), {
                 url: '{{ url_for("assets.api-asset-list") }}'
            }, { multiple:true, placeholder: "请输入组主机" });

            bees.initServerSideSelect2($('select[name="groups"]'), {
                 url: '{{ url_for("tasks.api-group-list") }}'
            }, { multiple:true, placeholder: "请输入组主机" });
        });

        var interval = null;
        var term = null;
        var timing = 1000;
        var mark = '';
        function setTermSize(ele) {
            $(ele).css("height", '100%')
                .css("width", '100%')
                .css('box-sizing', 'border-box')
                .css("padding-left", '5px')
        }
        function requestAndWrite(url) {
            var end = false;
            var success = true;
            if (!end && success) {
                success = false;
                $.ajax({
                    url: url + '?mark=' + mark,
                    method: "GET",
                    contentType: "application/json; charset=utf-8"
                }).done(function(result, textStatue, jqXHR) {
                    success = true;
                    if (jqXHR.status !== 200) {
                        term.write('.');
                        timing = 2000;
                    }
                    if (jqXHR.status === 200){
                        term.write(result.data.data);
                        mark = result.data.mark;
                        if (result.data.end){
                            end = true;
                            window.clearInterval(interval);
                        }
                    }
                })
            }
        }
        function initResultTerminal() {
            setTermSize(document.getElementById('term'));
            Terminal.applyAddon(fit);  // 自适应大小
            term = new Terminal({
                screenKeys: true,
                useStyle: true,
                cursorBlink: true, //光标闪烁
                //cursorStyle: 'underline', //光标样式
                theme: {
                    foreground: '#fff',   //字体
                    background: '#000' //背景色
                },
                fontFamily: '"Monaco", "Consolas", "monospace"',
                fontSize: 14
            });
            term.open(document.getElementById('term'));
            term.fit();
            term.clear();
        }

        $(function () {
            initResultTerminal();

            $("#exec").on('click', function () {
                setAjaxCSRFToken();
                var $formEle = $('form[name="roleForm"]');
                var formData = bees.serializeToObject($formEle.serializeArray());
                $.ajax({
                    type: 'post',
                    url: '{{ url_for("tasks.role-execute", pk=default_pk) }}'.replace(bees.defaultPK, '{{ id }}'),
                    data: formData,
                    success: function (result) {
                        if (result.code != 200) {
                            bees.tipError({
                                message: result.data.message
                            });
                        }else {
                            var log_url = '{{ url_for("ops.api-celery-task-log", pk=default_pk) }}'.replace(bees.defaultPK, result.data.task_id);
                            interval = setInterval(function () {
                                requestAndWrite(log_url)
                            }, timing);
                        }
                    }
                });

                return false;
            });

            $("#cancel").on('click', function () {
                window.location.href="javascript:history.go(-1)";
            })

        });

    </script>

{% endblock %}
